<template>
  <div class="account-text">
    <div class="flex">
      <p class="mg-r-8">运算结果示例：</p>
      <div>
        <div class="account-text-money">
          <p v-if="[1, 2].includes(info.total_money)" key="money">
            配送金额 = 原配送金额
            <span>{{ info.total_money === 1 ? '+' : '-' }}</span>
            <span v-if="info.change_type === 1" key="type">数值</span>
            <span v-else key="type">
              (原配送金额 * 数值)
            </span>
          </p>
          <p v-else key="money">配送金额不变</p>
        </div>
        <div class="account-text-change" v-if="[1, 2].includes(info.total_money)" key="moneyChange">
          <p v-if="info.change_object === 1" key="change">
            配送单价不变 配送数量 = 配送金额 / 配送单价
            <span class="block">配送数量保留两位小数方式为{{ textList.keepDecimals[info.keepDecimals] }}</span>
          </p>
          <p v-else key="change">
            配送数量不变 配送单价 = 配送金额 / 配送数量
            <span class="block">配送单价保留两位小数方式为{{ textList.keepDecimals[info.keepDecimals] }}</span>
          </p>
        </div>
        <div v-else key="moneyChange">
          <p v-if="info.change_object === 1" key="moneyChange-money">
            配送数量 = 原配送数量 + (原配送数量 * 数值)
            <span class="block">配送单价 = 配送金额 / 配送数量</span>
            <span class="block">配送数量保留两位小数方式为{{ textList.keepDecimals[info.keepDecimals] }}</span>
          </p>
          <p v-else key="moneyChange-money">
            配送单价 = 原配送单价 + (原配送单价 * 数值)
            <span class="block">配送数量 = 配送金额 / 配送单价</span>
            <span class="block">配送单价保留两位小数方式为{{ textList.keepDecimals[info.keepDecimals] }}</span>
          </p>
        </div>
        <p>下单数据逻辑同上</p>
        <div class="account-example mg-t-10">
          <div class="flex account-example-wrap">
            <p>修改状态</p>
            <p>配送数量</p>
            <p>配送单价</p>
            <p>配送金额</p>
          </div>
          <div class="flex account-example-wrap" v-for="(item, index) in exampleList" :key="index + Math.floor(Math.random() * 10000)">
            <p>前</p>
            <template v-for="(childItem, childIndex) in item">
              <p :key="randomString(childIndex)">{{ childItem.value }}</p>
            </template>
          </div> 
          <div class="flex account-example-wrap new-value" v-for="(item, index) in valueList" :key="index + Math.floor(Math.random() * 854)">
            <p>后</p>
            <template v-for="(childItem, childIndex) in item">
              <p :key="randomString(childIndex)">{{ childItem.value }}</p>
            </template>
          </div> 
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    length: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      textList: {
        total_money: {
          1: '增加',
          2: '减少',
          3: '不变'
        },
        changeObject: {
          1: '数量',
          2: '单价'
        },
        changeType: {
          1: '金额',
          2: '比例'
        },
        keepDecimals: {
          1: '四舍五入',
          2: '截取'
        }
      },
      valueList: [
        [
          { label: '配送数量', value: 1 },
          { label: '配送单价', value: 10 },
          { label: '配送金额', value: 10 },
        ]
      ]
    }
  },
  computed: {
    exampleList() {
      let list = [
        { label: '配送数量', value: 1 },
        { label: '配送单价', value: 10 },
        { label: '配送金额', value: 10 },
      ]
      if(this.length > 1) {
        list = [list, list]
      }else {
        list = [list]
      }
      this.valueList = JSON.parse(JSON.stringify(list))
      return list
    }
  },
  watch: {
    info: {
      handler() {
        const info = this.info
        let sendPrice = 10
        if(info.change_type === 1) {  //  修改方式为：金额
          if(info.total_money === 1) {
            sendPrice += (this.info.money / this.exampleList.length)
          }else if(info.total_money === 2){
            sendPrice -= (this.info.money / this.exampleList.length)
          }
        }else {   //  修改方式为：比例
          if(info.total_money === 1) {
            sendPrice = sendPrice + sendPrice * info.scale
          }else if(info.total_money === 2){
            sendPrice = sendPrice - sendPrice * info.scale
          }
        }

        if(this.exampleList.length > 1) {
          this.valueList.forEach(el => {
            el.forEach(item => {
              if(item.label === '配送金额') {
                item.value = this.numberCut(sendPrice)
              }
            })
          })
          this.valueList[0] = this.changeData(this.exampleList[0], this.valueList[0], sendPrice)
          this.valueList[1] = this.changeData(this.exampleList[1], this.valueList[1], sendPrice)
        }else {
          this.valueList[0][2].value = this.numberCut(sendPrice);
          this.valueList[0] = this.changeData(this.exampleList[0], this.valueList[0], sendPrice)
        }
      },
      deep: true
    },
  },
  methods: {
    numberCut(value) {  //  数字保留两位小数
      return this.info.keepDecimals === 1 ? value.toFixed(2) : Math.floor(value * 100) / 100
    },
    changeData(list, valueList, sendPrice) {
      const info = this.info
      if([1, 2].includes(info.total_money)) {   //  总金额增加或者减少
        if(info.change_object === 1) {
          valueList[1].value = list[1].value;
          valueList[0].value = this.numberCut(sendPrice / list[1].value);
        }else {
          valueList[0].value = list[0].value;
          valueList[1].value = this.numberCut(sendPrice / list[0].value);
        }
      }else {   //  总金额不变
        if(info.change_object === 1) {
          valueList[0].value = this.numberCut(list[0].value + list[0].value * info.scale / this.exampleList.length)
          valueList[1].value = this.numberCut(sendPrice / valueList[0].value);
        }else {
          valueList[1].value = this.numberCut(list[1].value + list[1].value * info.scale / this.exampleList.length)
          valueList[0].value = this.numberCut(sendPrice / valueList[1].value);
        }
      }
      return valueList
    },
    randomString(length) {
      let result = '';
      let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let charactersLength = characters.length;
      for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
      }
      return result;
    }
  },
  
}
</script>
<style lang="scss" scoped>
.account-text {
  .flex {
    display: flex;
  }
  .block {
    display: block;
  }
  .mg-r-8 {
    margin-right: 10px;
  }
  p {
    line-height: 24px;
  }
  .mg-t-10 {
    margin-top: 10px;
  }
  .account-example {
    width: 320px;
    border: 1px solid rgba(0,0,0, .15);
    border-radius: 4px;
    text-align: center;
    .account-example-wrap {
      border-bottom: 1px solid rgba(0,0,0, .15);
      p {
        text-align: center;
        width: 25%;
        color: rgba(0, 0, 0, 0.85);
        font-size: 13px;
        line-height: 26px;
        font-family: PingFang SC;
      }
      &.new-value {
        p {
          font-weight: 800;
          color: rgba(3, 169, 142, 0.85);
        }
      }
    }
  }
}
</style>